<template>
  <div class="asid_share">
    <div style="padding-left:5px;padding-top:3px;"></div>
    <div
      class="asid_share_box"
      v-for="item in asidShareNavItems"
      :key="item.text">
      <nuxt-link
        :to="item.href || '#'">
      <img
        class="adid_icon"
        :alt="item.text"
        :src="item.img">
        {{ item.text }}
      </nuxt-link>
    </div>
    <div
      v-show="goTopShow"
      class="asid_share_box go-top">
      <a
        href="#">
      <img
        class="adid_icon"
        src="~/assets/images/icon_fix_top.png">
        回到顶部
      </a>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: {
    qqLink: String,
    qunLink: String
  },
  data() {
    let idx = -1
    if (this.$route.name === 'themes') {
      idx = 0
    } else if (this.$route.name === 'register') {
      idx = 1
    } else if (~this.$route.name.indexOf('notice')) {
      idx = 2
    }
    return {
      idx,
      asidShareNavItems: [
        {
          img: require('~/assets/images/icon_fix01.png'),
          href: '/contact4',
          text: '在线客服',
        },
        {
          img: require('~/assets/images/icon_fix01.png'),
          href: '/contact4',
          text: '业务客服',
        },
        {
          img: require('~/assets/images/icon_fix01.png'),
          href: '/contact4',
          text: '加款客服',
        },
        {
          img: require('~/assets/images/icon_fix02.png'),
          href: '/vip4',
          text: '开通分站',
        },
        {
          img: require('~/assets/images/icon_fix03.png'),
          href: '/charge4',
          text: '账户充值',
        },
        {
          img: require('~/assets/images/icon_fix04.png'),
          href: '/account4',
          text: '个人中心',
        },
        {
          img: require('~/assets/images/icon_fix05.png'),
          href: '/notice4/-1',
          text: '最新公告',
        },
        {
          img: require('~/assets/images/icon_fix06.png'),
          href: '/notice4/-1',
          text: '常见问题',
        },
      ],
      goTopShow: false,
    }
  },
  created() {
    console.log(this.qunLink)
  },
  mounted() {
    window.addEventListener('scroll',this.scrollEvent,true)
  },
  computed: {
    ...mapState({
      site: (state) => state.site
    })
  },
  methods: {
    scrollEvent(e) {
      if(window.pageYOffset > 300) {
        this.goTopShow = true;
      } else {
        this.goTopShow = false;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.asid_share {

  font-size: 12px;
  position: fixed;
  width: 70px;
  padding: 10px 0 0;
  padding-top: 0px;
  top: 127px;
  right: 0;
  background: #fff;
  z-index: 2;
  border-radius: 3px;
  margin-right: 10px;
  border: 1px solid #ddd;
  &_box {
    position: relative;
    width: 100%;
    text-align: center;
    a {
      display: block;
      padding: 6px 0;
      color: #999;
      font-weight: 600;
      img {
        display: block;
        margin: 0 auto 4px;
        width: 20px;
      }
      &:hover {
        img {
          animation: barJump ease 1.2s 1;
        }
      }
    }
  }
  .go-top {
    background: #008BFD;
    border-radius: 0px 0px 3px 3px;
    animation: opacity-show 1s forwards;
    a {
      color: #fff;
    }
  }
}
@keyframes opacity-show {
  from {
    opacity: 0;
  } to {
    opacity: 1;
  }
}
@keyframes barJump {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
}

10% {
    -webkit-transform: translateY(5px) scaleX(1.2) scaleY(.8);
    transform: translateY(5px) scaleX(1.2) scaleY(.8);
}
30% {
    -webkit-transform: translateY(-10px) scaleX(1) scaleY(1) rotateZ(
5deg
);
    transform: translateY(-10px) scaleX(1) scaleY(1) rotateZ(
5deg
);
}
50% {
    -webkit-transform: translateY(0) scale(1) rotateZ(0);
    transform: translateY(0) scale(1) rotateZ(0);
}
55% {
    -webkit-transform: translateY(0) scaleX(1.1) scaleY(.9) rotateZ(0);
    transform: translateY(0) scaleX(1.1) scaleY(.9) rotateZ(0);
}
70% {
    -webkit-transform: translateY(-4px) scaleX(1) scaleY(1) rotateZ(
-2deg
);
    transform: translateY(-4px) scaleX(1) scaleY(1) rotateZ(
-2deg
);
}
80% {
    -webkit-transform: translateY(0) scaleX(1) scaleY(1) rotateZ(0);
    transform: translateY(0) scaleX(1) scaleY(1) rotateZ(0);
}
85% {
    -webkit-transform: translateY(0) scaleX(1.05) scaleY(.95) rotateZ(0);
    transform: translateY(0) scaleX(1.05) scaleY(.95) rotateZ(0);
}
100% {
    -webkit-transform: translateY(0) scaleX(1) scaleY(1);
    transform: translateY(0) scaleX(1) scaleY(1);
}
}
</style>
